<template>
  <div id="province">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.state" placeholder="国家"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.capital" placeholder="首都"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.continent" placeholder="大洲">
          <el-option label="亚洲" value="亚洲"></el-option>
          <el-option label="欧洲" value="欧洲"></el-option>
          <el-option label="非洲" value="非洲"></el-option>
          <el-option label="北美洲" value="北美洲"></el-option>
          <el-option label="南美洲" value="南美洲"></el-option>
          <el-option label="大洋洲" value="大洋洲"></el-option>
          <el-option label="南极洲" value="南极洲"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSelect">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialog.bianji = true">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading2"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="provinces"
      :border="tableBorder"
      style="width: 100%;text-align: center">
      <el-table-column
        prop="state"
        label="国家"
        align="center"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="capital"
        label="首都"
        align="center"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="continent"
        label="大洲"
        align="center"
        min-width="180">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="180">
        <template slot-scope="scope">
          <el-button type="primary" @click="dialogVisible(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="删除"
      :visible.sync="dialog.dialogVisible"
      width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteState">确 定</el-button>
      </span>
    </el-dialog>
    <bianji :dialog-bianji = 'dialog.bianji' @bianji-show="bianjiShow" @determine="determine"></bianji>
  </div>
</template>

<script>
import bianji from './dialog/bianjin.vue'

export default {
  name: 'province',
  mounted:function(){
    this.dataList()
  },
  data () {
    return {
      tableBorder: true,
      provinces:[],
      loading2: false,//加载中过渡动画
      dialog:{
        dialogVisible: false,
        bianji:false
      },
      id:null,
      formInline: {
        state: '',
        continent: '',
        capital:''
      }
    }
  },
  components: {
    bianji: bianji
  },
  computed: {

  },
  methods: {
    dataList(){
      const _this = this;
      this.$http({
          url:'http://localhost:9090/all',
          method:'POST',
          timeout:6000,
          before:function(){
            _this.loading2 = true
          }
      }).then(function(ref){
        console.log(ref)
        _this.provinces = JSON.parse(ref.bodyText).list;
        _this.loading2 = false;
      },function(err){
        _this.loading2 = false;
        console.log(err);
      })
    },
    dialogVisible(id){
      //删除弹出框
      console.log(id)
      this.id = id;
      this.dialog.dialogVisible = true
    },
    deleteState(){
      //删除确定回调函数
      const _this = this;
      console.log(this.id);
      this.dialog.dialogVisible = false
      this.$http.post('http://localhost:9090/delete',{id:_this.id}).then(
        function(ref){
          console.log(ref);
          _this.dataList()
        }
      );
    },
    onSelect(){
      //查找函数
      const _this = this;
      console.log(this.formInline);
      this.$http.post('http://localhost:9090/select',_this.formInline)
        .then(function(ref){
          console.log(ref.bodyText);
          const data = JSON.parse(ref.bodyText);
          if(data.status == '1'){
            _this.provinces = data.list;
          }else{
            alert(ref.msg)
          }
        })
    },
    bianjiShow(){
      console.log('------------')
      console.log('父级')
      this.dialog.bianji = false
    },
    determine(param){//新增函数
      console.log(param);
      console.log('新增');
      this.$http.post('http://localhost:9090/add',param)
        .then(function(ref){
          console.log(ref.bodyText);
          const data = JSON.parse(ref.bodyText);
          if(data.status == '1'){
            this.dialog.bianji = false
            this.dataList()
          }else{
            alert(data.msg)
          }
        })
    }
  }
}
</script>

<style scoped>

</style>
